<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用电量统计</title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
    <meta http-equiv="cleartype" content="on">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/assets/base/slelestat/css/style.css?v={BEESCRM:$v}">
    <link rel="stylesheet" href="/assets/bower_components/sweetalert/lib/sweet-alert.css">
    <link rel="stylesheet" href="/assets/public/mobiscroll/css/mobiscroll.custom-3.0.0-beta2.min.css">
</head>
<body>
<div class="wraper">
    <input type="hidden" id="js_number_container" value="{BEESCRM:$number}">
	<div class="select1 show">
		<if condition="$role_type eq 4">
			<div class="tab tab-two clearfix">
				<a href="javascript:void(0);" class="tab-list college" data-college="">学院<span class="triangle"></span></a>
				<a href="javascript:void(0);" class="tab-list grade" data-grade="">届数<span class="triangle"></span></a>
			</div>
		</if>
		<if condition="$role_type eq 3">
			<div class="tab tab-two clearfix">
				<a href="javascript:void(0);" class="tab-list grade" data-grade="">届数<span class="triangle"></span></a>
				<a href="javascript:void(0);" class="tab-list major" data-major="">专业<span class="triangle"></span></a>
			</div>
		</if>

		<if condition="$role_type eq 2">
			<div class="tab clearfix">
				<a href="javascript:void(0);" class="tab-list class" data-class="">班级<span class="triangle"></span></a>
			</div>
		</if>

		<if condition="$role_type eq 1">
			<div class="tab clearfix">
				<a href="javascript:void(0);" class="tab-list class" data-class="">班级<span class="triangle"></span></a>
			</div>
		</if>
	</div>

    <div class="select2">
	    <if condition="$role_type eq 4">
		    <div class="tab tab-three clearfix">
			    <a href="javascript:void(0);" class="tab-list college" data-college="">学院<span class="triangle"></span></a>
			    <a href="javascript:void(0);" class="tab-list grade" data-grade="">届数<span class="triangle"></span></a>
			    <a href="javascript:void(0);" class="tab-list major" data-major="">专业<span class="triangle"></span></a>
		    </div>
		</if>

	    <if condition="$role_type eq 3">
            <div class="tab tab-three clearfix">
                <a href="javascript:void(0);" class="tab-list grade" data-grade="">届数<span class="triangle"></span></a>
                <a href="javascript:void(0);" class="tab-list major" data-major="">专业<span class="triangle"></span></a>
                <a href="javascript:void(0);" class="tab-list class" data-class="">班级<span class="triangle"></span></a>
            </div>
        </if>

	    <if condition="$role_type eq 2">
            <div class="tab tab-two clearfix">
                <a href="javascript:void(0);" class="tab-list class" data-class="">班级<span class="triangle"></span></a>
                <a href="javascript:void(0);" class="tab-list room" data-room="">寝室<span class="triangle"></span></a>
            </div>
        </if>
	    <if condition="$role_type eq 1">
		    <div class="tab tab-two clearfix">
                <a href="javascript:void(0);" class="tab-list class" data-class="">班级<span class="triangle"></span></a>
                <a href="javascript:void(0);" class="tab-list room" data-room="">寝室<span class="triangle"></span></a>
		    </div>
	    </if>
    </div>

    <div class="classify">
    </div>
    <div class="dataload">
        <img src="/assets/base/statistics/images/loading.gif">
        <p class="text-gray text-center">数据加载中</p>
    </div>
    <div class="chart-box">

    </div>
    <div class="tab fixed-tab tab-two text-center">
        <a href="javascript:void(0);" class="fixed-list visited" data-type="1">用电统计</a>
        <a href="javascript:void(0);" class="fixed-list" data-type="2">用电趋势</a>
    </div>

    <div class="pop-box" id="pop-select">
        <div class="lists">
            <input id="start_time" placeholder="请选择开始时间"/>
            <span class="triangle"></span>
        </div>
        <div class="lists">
            <input id="end_time" placeholder="请选择结束时间"/>
            <span class="triangle"></span>
        </div>
        <div class="btn-box">
            <a href="#" class="btn bg-blue" id="commit">筛选</a>
        </div>
    </div>

</div>

</body>
<input type="hidden" id="roletypes" value="{BEESCRM:$role_type}">

<script type="text/javascript" src="/assets/public/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/assets/public/highcharts/highcharts.js"></script>
<script src="/assets/base/electricity/js/jq.utils.js"></script>
<script src="/assets/bower_components/sweetalert/lib/sweet-alert.min.js"></script>
<script type="text/javascript" src="/assets/base/slelestat/js/search.js"></script>
<script type="text/javascript" src="/assets/public/mobiscroll/mobiscroll.custom-3.0.0-beta2.min.js"></script>
<script>
    $(function(){
        var roletype = $('#roletypes').val();
	    var xh = $('#js_number_container').val();
        var college_id = '',grade_id = '',class_id = '',major_id = '',room_id='',start_time='',end_time='';

        type = $('.visited').data('type');
        $('.fixed-tab').on('click','.fixed-list',function(){
            college_id = '',grade_id = '',class_id = '',major_id = '',room_id='';
            $(this).addClass('visited').siblings().removeClass('visited');
            type = $(this).data('type');
            typeLoad();
        });
        typeLoad();

        $('body').click(function(){
            $('.classify').removeClass('show');
        });

        $('.tab').click(function(e){
            e.stopPropagation();
        });

        /*分类请求筛选条件*/
        $('.tab').on('click','.tab-list',function(){
            if(type == 1){
                if(roletype == 4){
                    if($(this).hasClass('college')){
                        getCollege();
                    }else if($(this).hasClass('grade')){
                        if(college_id == ''){
                            $.alert('error','请先选择学院');
                        }else{
                            getGrade();
                        }
                    }
                }else if(roletype == 3){
                    if($(this).hasClass('grade')){
                        getGrade();
                    }else if($(this).hasClass('major')){
                        if(grade_id == ''){
                            $.alert('error','请先选择届数');
                        }else{
                            getMajor();
                        }
                    }
                }else{
                    getClass();
                }
            }else{
                if(roletype == 4){
                    if($(this).hasClass('college')){
                        getCollege();
                    }else if($(this).hasClass('grade')){
                        if(college_id == ''){
                            $.alert('error','请先选择学院');
                        }else{
                            getGrade();
                        }
                    }else if($(this).hasClass('major')){
                        if(grade_id == ''){
                            $.alert('error','请先选择届数');
                        }else{
                            getMajor();
                        }
                    }
                }else if(roletype == 3){
                    if($(this).hasClass('grade')){
                        getGrade();
                    }else if($(this).hasClass('major')){
                        if(grade_id == ''){
                            $.alert('error','请先选择届数');
                        }else{
                            getMajor();
                        }
                    }else if($(this).hasClass('class')){
                        if(major_id == ''){
                            $.alert('error','请先选择专业');
                        }else{
                            getClass();
                        }
                    }
                }else{
                    if($(this).hasClass('class')){
                        getClass();
                    }else{
                        if(class_id == ''){
                            $.alert('error','请先选择班级');
                        }else{
                            getRoom();
                        }
                    }
                }
            }
        });

        /*筛选*/
        $(document).ready(function(){
            $(document).on('click','.classify-list',function(){
                if($(this).hasClass('college-list')){
                    college_id = $(this).data('id');
                    grade_id = '';
                    class_id = '';
                    $('.college').attr('data-college',college_id);
                    typeLoad();
                    $('.classify').removeClass('show');
                }else if($(this).hasClass('grade-list')){
                    grade_id = $(this).data('id');
                    major_id = '';
                    $('.grade').attr('data-grade',grade_id);
                    typeLoad();
                    $('.classify').removeClass('show');
                }else if($(this).hasClass('major-list')){
                    major_id = $(this).data('id');
                    class_id = '';
                    $('.major').attr('data-major',major_id);
                    typeLoad();
                    $('.classify').removeClass('show');
                }else if($(this).hasClass('class-list')){
                    class_id = $(this).data('id');
                    room_id = '';
                    $('.class').attr('data-class',class_id);
                    typeLoad();
                    $('.classify').removeClass('show');
                }else{
                    room_id = $(this).data('id');
                    $('.room').attr('data-room',room_id);
                    typeLoad();
                    $('.classify').removeClass('show');
                }
            })
        });

        /*类别判断，请求数据*/
        function typeLoad(){
            if(type == 1){
                $('.select1').addClass('show');
                $('.select2').removeClass('show');
                getData(30);
            }else{
                $('.select1').removeClass('show');
                $('.select2').addClass('show');
                getData(7);
                getData(30);
            }
        }

        $(document).ready(function(){
            $(document).on('click','#select',function(){
                $('#pop-select').show();
            })
        });
        var instance = mobiscroll.calendar('#start_time', {
            theme: 'mobiscroll',
            lang: 'zh',
            display: 'bottom'
        });
        var instance = mobiscroll.calendar('#end_time', {
            theme: 'mobiscroll',
            lang: 'zh',
            display: 'bottom'
        });

        $('#commit').click(function(){
            start_time = $('#start_time').val();
            end_time = $('#end_time').val();
            $('#start_time').val(start_time);
            $('#end_time').val(end_time);
            getData();
            $('#pop-select').hide()
        });

        /*获取学院*/
        function getCollege(){
            $.ajax({
                url: '/base/slEleStat/getCollege',
                type: 'post',
                data: {xh:xh},
                dataType: 'json',
                beforeSend: function(){
                },
                success: function(data){
                    var html = '<a href="javascript:void(0);" class="classify-list college-list" data-id="0">全部学院</a>';
                    if(data.status == 'S') {
                        if(data.data.length > 0){
                            $.each(data.data,function(i,k){
                                html += '<a href="javascript:void(0);" class="classify-list college-list" data-id="'+ k.college_id +'">'+ k.college_name +'</a>';
                            })
                        }else{
                            html += '暂无数据';
                        }
                        $('.classify').html(html).addClass('show');
                    }else{
                        $.alert('error',data.errMsg);
                        return false;
                    }
                }
            })
        }

        /*获取年级*/
        function getGrade(){
            $.ajax({
                url: '/base/slEleStat/getGrade',
                type: 'post',
                data: {college_id:college_id,xh:xh},
                dataType: 'json',
                beforeSend: function(){
                },
                success: function(data){
                    var html = '<a href="javascript:void(0);" class="classify-list grade-list" data-id="0">全部届数</a>';
                    if(data.status == 'S') {
                        if (data.data.length > 0) {
                            $.each(data.data, function (i, k) {
                                html += '<a href="javascript:void(0);" class="classify-list grade-list" data-id="' + k.grade_id + '">' + k.grade_name + '</a>';
                            })
                        }
                        $('.classify').html(html).addClass('show');
                    }else{
                        $.alert('error',data.errMsg);
                        return false;
                    }
                }
            })
        }

        /*获取专业*/
        function getMajor(){
            $.ajax({
                url: '/base/slEleStat/getMajor',
                type: 'post',
                data: {grade_id:grade_id,xh:xh},
                dataType: 'json',
                beforeSend: function(){
                },
                success: function(data){
                    var html = '<a href="javascript:void(0);" class="classify-list major-list" data-id="0">全部专业</a>';
                    if(data.status == 'S') {
                        if (data.data.length > 0) {
                            $.each(data.data, function (i, k) {
                                html += '<a href="javascript:void(0);" class="classify-list major-list" data-id="' + k.major_id + '">' + k.major_name + '</a>';
                            })
                        }
                        $('.classify').html(html).addClass('show');
                    }else{
                        $.alert('error',data.errMsg);
                        return false;
                    }
                }
            })
        }

        /*获取班级*/
        function getClass(){
            $.ajax({
                url: '/base/slEleStat/getClass',
                type: 'post',
                data: {major_id:major_id,xh:xh},
                dataType: 'json',
                beforeSend: function(){
                },
                success: function(data){
                    var html = '<a href="javascript:void(0);" class="classify-list class-list" data-id="0">全部班级</a>';
                    if(data.status == 'S') {
                        if (data.data.length > 0) {
                            $.each(data.data, function (i, k) {
                                html += '<a href="javascript:void(0);" class="classify-list class-list" data-id="' + k.class_id + '">' + k.class_name + '</a>';
                            })
                        }
                        $('.classify').html(html).addClass('show');
                    }else{
                        $.alert('error',data.errMsg);
                        return false;
                    }
                }
            })
        }

        /*获取寝室*/
        function getRoom(){
            $.ajax({
                url: '/base/slEleStat/getRoom',
                type: 'post',
                data: {class_id:class_id,xh:xh},
                dataType: 'json',
                beforeSend: function(){
                },
                success: function(data){
                    var html = '<a href="javascript:void(0);" class="classify-list room-list" data-id="0">全部寝室</a>';
                    if(data.status == 'S') {
                        if (data.data.length > 0) {
                            $.each(data.data, function (i, k) {
                                html += '<a href="javascript:void(0);" class="classify-list room-list" data-id="' + k.room_id + '">' + k.room_name + '</a>';
                            })
                        }
                        $('.classify').html(html).addClass('show');
                    }else{
                        $.alert('error',data.errMsg);
                        return false;
                    }
                }
            })
        }

        /*数据请求*/
        function getData(time){
            var linex = [];
            var chartData = [];
            var number = $('#js_number_container').val();
            $.ajax({
                url: '/Base/SlEleStat/ajaxGetEleData',
                type:"post",
                data:{time:time,type:type,xh:number,collegeId:college_id,gradeId:grade_id,majorId:major_id,classId:class_id,room_id:room_id,start_time:start_time,end_time:end_time},
                dataType:"json",
                beforeSend:function(){
                    $('#databox').html('');
                    $('.dataload').show();
                    $('.chart-box .container').remove();
                },
                success:function(data){
                    $('.dataload').hide();
                    if(data.errCode == 0){
                        if(type == 1){
                            var html = '';
                            if(data.data.length > 0){
                                $.each(data.data,function(i,k){
                                    linex.push(parseInt(i)+1);
                                    chartData.push(parseFloat(k.num));

                                    html += '<div class="tb-mode lists"><div class="text-12 tb-cell">'+ (parseInt(i)+1)+ '、' + k.college_name +'</div><div class="text-right text-12 tb-cell"><p style="padding-bottom: 6px;">总量'+ parseFloat(k.num).toFixed(2) +'度</p><p>人均'+ parseFloat(k.num/k.user).toFixed(2) +'度</p></div></div>'
                                });
                                $('.chart-box').append('<div class="container"><p class="title">'+ data.time1 + '至' + data.time2 +'用电统计<a href="javascript:void(0);" class="pull-right" id="select">筛选</a></p><div id="databox-'+ time +'"></div><p class="chart-name">'+data.tips+'</p></div>');
                                $('#databox-'+ time).html('<div id="chartdata-'+ time +'" class="charts"></div>');
                                $('.chart-box').append('<div class="container detail">'+ html +'</div>');
                            }else{
                                $('.chart-box').append('<div class="container"><p class="title">'+ data.time1 + '至' + data.time2 +'用电统计<a href="javascript:void(0);" class="pull-right" id="select">筛选</a></p><div id="databox-'+ time +'"></div></div>');
                                $('#databox-'+ time).html('<p class="nodata">暂无数据</p>');
                            }
                            getBarchart('#chartdata-'+ time,linex,chartData,'#2498d3');
                        }else{
                            var days = data.days;
                            if(data.data.length > 0){
                                $.each(data.data,function(i,k){
                                    linex.push(k.time.substring(5,k.time.length));
                                    chartData.push(parseFloat(k.num));
                                });
                                $('.chart-box').append('<div class="container"><p class="title">近'+ time +'天用电趋势</p><div id="databox-'+ time +'"></div><p class="chart-name">'+data.tips+'</p></div>');
                                $('#databox-'+ time).html('<div id="chartdata-'+ time +'" class="charts"></div>');
                            }else{
                                $('.chart-box').append('<div class="container"><p class="title">近'+ time +'天用电趋势</p><div id="databox-'+ time +'"></div></div>');
                                $('#databox-'+ time).html('<p class="nodata">暂无数据</p>');
                            }
                            getLinechart('#chartdata-'+ time,linex,chartData,days,'#2498d3');
                        }
                    }else{
                        $.alert('error',data.errMsg);
                        return false;
                    }
                }
            });
        }

        /*设置线性图标*/
        function getLinechart(chartname,linex,chartData,days,color){
            $(chartname).highcharts({
                chart: {
                    type: 'spline'
                },
                title: {
                    text: ''
                },
                credits: {
                    text: ''
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return this.y;
                    }
                },
                xAxis: {
                    tickInterval: days,
                    categories: linex
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    labels: {
                        formatter: function () {
                            return this.value
                        }
                    }
                },
                series: [{
                    marker: {
                        enabled: false
                    },
                    name: '',
                    color: color,
                    data: chartData
                }]
            });
        }

        /*设置柱状图表*/
        function getBarchart(chartname,linex,chartData,color){
            $(chartname).highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: ''
                },
                credits: {
                    text: ''
                },
                xAxis: {
                    categories: linex
                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return this.y;
                    }
                },

                series: [{
                    name: '',
                    color: color,
                    data: chartData
                }]
            });
        }

    });
</script>
</html>